<template>
    <div>
        <div class="cp-header read-header">
            <div class="cp-main-box">
                <a href="/" class="cp-logo">
                    <!-- 主页logo -->
                    <img src="../../public/img/logo.png">
                </a>
                <div class="layui-nav headerRight"  lay-filter="">
                    <!-- 搜索框 -->
                    <div class="cp-header-search">
                        <input id="searchBox" @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
                        <a href="javascript:" class="iconfont icon-search"></a>
                    </div>

                    <div class="cp-header-link">
                        <!-- 跳转充值页面 -->
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                    </div>
                    <div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
                        <a href="/register">注册</a>
                        <span></span>
                        <a href="" @click.prevent="loginDialogVisible = true">登录</a>
                    </div>
                    <div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
                        <!-- 跳转用户个人中心 -->
                        <a href="/user/info">
                            <i class="iconfont icon-dengpao"></i>
                            <!-- 用户头像（可选） -->
                            <img src="/img/default_head.png" class="layui-nav-img header">
                            <!-- 用户名 -->
                            <span class="userName cp-ellipsis" v-text="userName"></span>
                            <!-- 更多 -->
                            <span class="layui-nav-more"></span>
                        </a>

                        <dl class="layui-nav-child" id="userMsgChild">
                            <dd>
                                <a href="javascript:;" @click="logout()">
                                    <i class="iconfont icon-tuichu"></i>
                                    退出
                                </a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 模态框 -->
            <el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
                <el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
                    <el-form-item prop="tel">
                        <el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="singIn">立即登录</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    <div class="theme" style="zoom: 1;">
        <div class="read-main-wrap font-family01"
            style="font-size: 18px; z-index: 101">
            <div data-l1="3">
                <div class="text-wrap" id="chapter-47215875887440655" data-info="0|0|47229883940046870|1|0">
                    <div class="main-text-wrap">
                        <div class="text-head">
                            <h3 class="j_chapterName">
                                {{ chapterInfo.chapterName }}
                            </h3>
                            <div class="text-info cf">
                                <div class="info fl">
                                    <a :href="'/novel/' + bookId" data-bid="17588199707521004" data-auid="17525447806953201">
                                        <em class="iconfont"></em>
                                        {{ chapterInfo.bookName }}
                                    </a>
                                    <a :href="'/novel/' + bookId" data-bid="17588199707521004" data-auid="17525447806953201">
                                        <em class="iconfont"></em>
                                        {{ chapterInfo.authorName }}
                                    </a>
                                    <i>
                                        <em class="iconfont"></em>
                                        <span class="j_chapterWordCut">
                                            {{ chapterInfo.wordNumber }}
                                        </span>字
                                    </i>
                                    <i>
                                        <em class="iconfont"></em>
                                        <span class="j_updateTime">
                                            {{ chapterInfo.updateTime }}
                                        </span>
                                    </i>
                                </div>
                            </div>
                        </div>
                        <!-- 内容 -->
                        <div class="read-content j_readContent">
							<div v-if="subscribed == false" class="cp-read-sub">
								<p class="cp-read-sub-desc">当前章节为VIP章节,需要订阅才能阅读，请先订阅。</p>
								<p class="cp-read-sub-price">
									<span class="iconfont icon-yupei">"￥{{ chapterInfo.amount }}"</span>
								</p>
								<div class="cp-read-sub-btn">
									<a href="javascript:" @click="insertSubscribe">订阅章节</a>
									<a :href="'/novel/' + bookId">返回目录</a>
								</div>
							</div>
							<div v-if="subscribed" v-html="chapterInfo.content">
								
							</div>
                        </div>
                    </div>
                </div>
            </div>
                <!-- 底部按钮 -->
            <div class="chapter-control dib-wrap" data-l1="3">
                <a :class="{ disabled: chapterId == chapterInfo.minId }" href="javascript:" @click="prev">
                    上一章
                </a>
                <span>|</span>
                <a :href="'/novel/' + bookId">
                    目录
                </a>
                <span>|</span>
                <a  :class="{ disabled: chapterId == chapterInfo.maxId }" :href="'/read/' + bookId + '/' + (+chapterId + 1)" @click="next">
                    下一章
                </a>
            </div>
        </div>

        
<!--            <div class="leftList">
                <el-tabs type="card" value="hid" tab-position="left" style="height: 1000px;">
                    <el-tab-pane label="目录">
                        <el-card class="box-card" shadow="always">
                            <div class="text item">
                               
                            </div>
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="收藏"></el-tab-pane>
                    <el-tab-pane label="书页"></el-tab-pane>
                </el-tabs>
            </div>
        -->

    </div>
    <Footer class="footer"></Footer>
    </div>
</template>
<script>
import Footer from '../components/Footer'
import $ from 'jquery'

export default {
    name: 'Read',
    components: {
		Footer
    },
    mounted() {
        layui.use('element');
		this.isSubscribed();
		this.initChapterInfo();
    },
    data() {
        return {
			// 订阅表单
			subscribeForm: {
				userId: sessionStorage.getItem("userId"),
				chapterId: this.$route.params.chapterId
			},
			// 当前书籍id
			bookId: this.$route.params.bookId,
			// 当前章节id
			chapterId: this.$route.params.chapterId,
			// 此章节是否已订阅
			subscribed: false,
            // 登录模态框可见
            loginDialogVisible: false,
			// 章节初始化信息
			chapterInfo: {},
            // 登录表单
            loginForm: {
                userTel: "",
                password: ""
            },
            // 搜索内容
            searchContent: "",
        }
    },
    computed: {
        // 登录状态
        logged: function () {
            return (this.userName != null);
        },
        // 用户名
        userName: function () {
            return sessionStorage.getItem("userName");
        }
    },
    methods: {
		// 初始化页面
		initChapterInfo() {
			let _this = this;
			$.ajax({
				url: "http://localhost/chapter/" + _this.chapterId,
				success: res => {
					_this.chapterInfo = res.data;
				}
			});
		},
		// 订阅
		insertSubscribe() {
			// 判断是否登录
			if (!sessionStorage.getItem("userId")) {
				this.loginDialogVisible = true;
				return;
			}
			let _this = this;
			$.ajax({
				url: "http://localhost/subscribe",
				type: "POST",
				data: _this.subscribeForm,
				success: res => {
					if (res.code != 200) {
						_this.$notify.error(res.message);
						return;
					}
					_this.$message.success("订阅成功");
					// 刷新页面
					location.reload();
				}
			});
		},
		// 判断用户是否订阅此章节
		isSubscribed() {
			let _this = this;
			// 取出用户id
			let userId = sessionStorage.getItem("userId");
			// 判断是否登录
			if (!userId) {
				this.loginDialogVisible = true;
				return;
			}
			$.ajax({
				url: "http://localhost/subscribe/" + userId + "/" + _this.chapterId,
				success: res => {
					_this.subscribed = res;
				}
			});
		},
        openList() {
            $(".cp-novel-menu-item").removeClass('cp-hidden');
            $(".cp-novel-menu-more").html('<h2>--以下为付费章节--</h2>')
        },
        // 搜索
        search() {

        },
        // 登录
        singIn() {
            let _this = this;
            $.ajax({
                url: "http://localhost/user/login",
                type: "POST",
                data: _this.loginForm,
                success: function (res) {
                    // 判断响应码
                    if (res.code != 200) {
                        // 错误提示信息
                        _this.$message.error(res.message);
                        return;
                    }
                    // 登录成功提示信息
                    _this.$message.success("登录成功");
                    // 关闭模态框
                    _this.loginDialogVisible = false;
                    // 将返回数据存入session
                    sessionStorage.setItem("userId", res.data.userId);
                    sessionStorage.setItem("userName", res.data.userName);
                    // 存入作者Id
                    if (res.data.authorId != null) {
                        sessionStorage.setItem("authorId", res.data.authorId);
                    }
                    // 刷新
                    location.reload();
                }
            });
        },
		// 注销
        logout() {
            sessionStorage.clear();
            location.reload();
        },
		// 上一页
		prev() {
			if (this.chapterId == this.chapterInfo.minId) {
				return;
			}
			location.href="/read/" + this.bookId + "/" + (+this.chapterId - 1);
		},
		next() {
			if (this.chapterId == this.chapterInfo.maxId) {
				return;
			}
			location.href="/read/" + this.bookId + "/" + (+this.chapterId + 1);
		}
    }
}
</script>
<style scoped>
    .theme {
        /* margin-top: 300px; */
        /* margin-top: 0px; */
        background-image: url(/img/body.png);
    }
    .text-wrap {
        background-image: url(/img/bg.png);
        margin-top: 50px;
    }
    .dib-wrap {
        background-image: url(/img/bg.png);
    }
    .header {
        background-image: url(/img/bg.png);
    }
	.cp-header {
		height: 35px;
	}
    .footer {
        margin-top: 0px;
        width: 100%;
        background-image: url(/img/bg.png);
    }
    .leftList {
        position: absolute;
        left: 330px;
        top: 132px;
        z-index: 9999;
    }
    .box-card {
        border: 0;
        height: 500px;
        width: 799px;
        background-image: url(/img/left-bg.png);
    }
    .el-table {
        background-image: url(/img/left-bg.png);
    }
    .thead {
        background-image: url(/img/left-bg.png);
    }
    .read-header {
        background-image: url(/img/bg.png);
    }
    .el-button {
        background-color:#51c29a;
        border: #51c29a 1px solid;
        width: 100%;
        border-radius: 3px;
    }
    .el-button:hover {
        background-color:#7adbbb;
        border: #7adbbb solid 1px;
    }
    .loginBoxTitle {
        bottom: 20px;
    }
	.cp-read-sub {
	    margin: 150px auto;
	    text-align: center;
	}
	.cp-read-sub-desc {
	    margin-bottom: 30px;
	    text-align: center;
	    font-size: 16px;
	}
	
	.cp-read-sub-price {
	    margin-bottom: 30px;
	}
	
	.cp-read-sub-price span {
	    display: inline-block;
	    height: 36px;
	    font-size: 16px;
	    line-height: 36px;
	}
	
	.cp-read-sub-price span:before {
	    color: rgba(81, 194, 154, 1);
	    font-size: 32px;
	    float: left;
	    font-weight: bold;
	}
	
	.cp-read-sub-btn > a {
	    display: inline-block;
	    width: 120px;
	    height: 48px;
	    background: rgba(81, 194, 154, 1);
	    border-radius: 24px;
	    line-height: 48px;
	    color: #FFFFFF;
	    margin: 0 15px;
	}
</style>